<template>
	<view class="content">
		<view class="">
			<navt></navt>
		</view>

		<view class="swiper">
			<u-swiper :list="list" :height="240"></u-swiper>
		</view>

		<view class="grid">
			<view class="grid-item" v-for="(item,index) in grid" :key="index">
				<image :src="item.icon" />
				<view class="grid-item-font">{{ item.text }}</view>
			</view>
			<!-- <view class="grid-item">
				<image src="@/static/image/分享.png"></image>
				<view>秒杀</view>
			</view> -->
		</view>

		<view class="bobox">
			<view class="bobox-left">
				<view class="bobox-left1">今日<span style="color: #e4753e;">秒杀</span>
					<u-count-down :timestamp="timestamp" bg-color="#efa447" 
						color='#f8f8f8' separator-color="#fed5b1">
					</u-count-down>
				</view>
				<view class="bobox-left2">限时折扣抢到就是赚到</view>
				<view class="bobox-left3"></view>
			</view>
			<view class="bobox-right">
				<view class="bobox-right1">
					<view class="b1">热销排行榜</view>
					<view class="b2">更多<span style="color: red;margin-left: 10rpx;">></span></view>
				</view>
				<view class="bobox-right2">大家都在买</view>
				<view class="bobox-right3"></view>
			</view>
		</view>

		<view class="shop">
			<view class="shop-title">推荐 — 精选好物</view>
			<view class="shop-thing">
				<view class="shop-item" v-for="(item,index) in shop" :key="index">
					<view class="shop-item1">
						<image :src="item.img"></image>
					</view>
					<view class="shop-item2">{{ item.text1 }}</view>
					<view class="c1">
						<view class="shop-item3">{{ item.text2 }}</view>
						<view class="shop-item4">{{ item.text3 }}</view>
						<view class="shop-item5">
							<view class="item5-left">{{ item.text4 }}</view>
							<view class="item5-right" v-if="item.text5">{{ item.text5 }}</view>
						</view>
						<view class="shop-item6"><span
								style="color: #ee8d4a;font-size: 28rpx;">{{ item.text6 }}</span>/斤</view>
						<view class="shop-item7"><u-icon name="plus-circle-fill" color="#6ac492" size="52"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navt from '@/components/navigation/navigation.vue'
	export default {
		components: {
			navt
		},
		data() {
			return {
				list: [{
						image: 'https://img1.baidu.com/it/u=1066150290,1612459096&fm=253&fmt=auto&app=120&f=JPEG?w=929&h=500',
						title: '1'
					},
					{
						image: 'https://img2.baidu.com/it/u=1766992653,1125916224&fm=253&fmt=auto&app=120&f=JPEG?w=936&h=500',
						title: '2'
					},
					{
						image: 'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20231116/10/26/724a676369a42bef3f7d924e3e00a1f5.jpg',
						title: '3'
					}
				],
				grid: [{
						id: 1,
						icon: "../../static/image/团购.png",
						text: "团购"
					},
					{
						id: 2,
						icon: "../../static/image/秒杀.png",
						text: "秒杀"
					},
					{
						id: 3,
						icon: "../../static/image/精选.png",
						text: "精选"
					},
					{
						id: 4,
						icon: "../../static/image/领劵.png",
						text: "领劵"
					},
					{
						id: 5,
						icon: "../../static/image/分享.png",
						text: "分享"
					},
				],
				shop: [{
						id: 1,
						img: "../../static/image/包子.png",
						text1: "今日疯抢",
						text2: "江苏无锡香菇猪肉包",
						text3: "猪肉肥美 | 鲜甜嫩软 | 多汁美味",
						text4: "多汁香嫩",
						text5: "卷减10元",
						text6: "￥8.79"
					},
					{
						id: 2,
						img: "../../static/image/包子.png",
						text1: "今日疯抢",
						text2: "浙江临海西蓝花",
						text3: "基地直供 | 绿色培植 | 新鲜采摘",
						text4: "绿色新鲜",
						text5: "卷减10元",
						text6: "￥4.79"
					},
					{
						id: 3,
						img: "../../static/image/包子.png",
						text1: "今日疯抢",
						text2: "云南高山西红柿",
						text3: "鲜嫩多汁 | 软甜爽口 | 入口美味",
						text4: "美味多汁",
						text5: "卷减10元",
						text6: "￥2.44"
					},
					{
						id: 4,
						img: "../../static/image/包子.png",
						text1: "今日疯抢",
						text2: "宁夏西吉县马铃薯",
						text3: "基地直供 | 绿色培植 | 新鲜采摘",
						text4: "绿色新鲜",
						text5: "卷减10元",
						text6: "￥3.21"
					},
					{
						id: 5,
						img: "../../static/image/包子.png",
						text1: "今日疯抢",
						text2: "山东枣庄辣子鸡",
						text3: "鸡肉肥美 | 鲜辣嫩软 | 多汁美味",
						text4: "鲜辣嫩软",
						text5: "",
						text6: "￥25.00"
					},
				],
				timestamp: 86399,
			}
		},
		onLoad(e) {},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #efefef;

		.swiper {
			width: 90%;
			margin: auto;
			z-index: 999;
			position: relative;
			top: -9vh;
		}

		.grid {
			width: 90%;
			margin: -7vh auto 0;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 30rpx 0;

			.grid-item {
				image {
					width: 6vh;
					height: 6vh;
					border-radius: 100%;
				}

				.grid-item-font {
					text-align: center;
				}
			}
		}

		.bobox {
			width: 90%;
			margin: 40rpx auto 0;
			display: flex;
			justify-content: space-between;

			.bobox-left {
				width: 47%;
				height: 240rpx;
				border-radius: 30rpx;
				background-image: linear-gradient(#feead3, #fefdfc);

				.bobox-left1 {
					font-size: 34rpx;
					font-weight: bolder;
					padding: 20rpx 0 10rpx 20rpx;
				}

				.bobox-left2 {
					font-size: 22rpx;
					padding-left: 20rpx;
					color: #aeaba8;
				}
			}

			.bobox-right {
				width: 47%;
				height: 240rpx;
				border-radius: 30rpx;
				background-image: linear-gradient(#fee6e9, #fefdfc);

				.bobox-right1 {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 30rpx 10rpx 20rpx;

					.b1 {
						font-size: 34rpx;
						font-weight: bolder;
					}

					.b2 {
						font-size: 20rpx;
						padding-top: 20rpx;
					}
				}

				.bobox-right2 {
					font-size: 22rpx;
					padding-left: 20rpx;
					color: #aeaba8;
				}
			}
		}

		.shop {
			width: 90%;
			margin: 30rpx auto;

			.shop-title {
				font-weight: bolder;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.shop-thing {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.shop-item {
					width: 49%;
					position: relative;
					background-color: #fff;
					border-radius: 20rpx;
					margin-bottom: 30rpx;

					.shop-item1 {
						width: 100%;
						border-radius: 20rpx;
						box-shadow: 0px 5px 5px grey;
						overflow: hidden;

						image {
							width: 100%;
							height: 200rpx;
						}
					}

					.shop-item2 {
						color: #fff;
						background-color: #e8825b;
						position: absolute;
						top: 0;
						padding: 5rpx 10rpx;
						border-radius: 20rpx 0 20rpx 0;
					}

					.c1 {
						width: 90%;
						margin: auto;

						.shop-item3 {
							padding: 20rpx 0;
							font-size: 26rpx;
							font-weight: 600;
						}

						.shop-item4 {
							color: #aeaba8;
							font-size: 20rpx;
							padding-bottom: 20rpx;
						}

						.shop-item5 {
							display: flex;
							margin-bottom: 20rpx;

							.item5-left {
								color: #ee8d4a;
								border: 1px solid #ee8d4a;
								font-size: 17rpx;
								padding: 3rpx 7rpx;
								margin-right: 16rpx;
							}

							.item5-right {
								color: #4fbf7b;
								border: 1px solid #4fbf7b;
								font-size: 17rpx;
								padding: 3rpx 7rpx;
							}
						}

						.shop-item6 {
							color: #aeaba8;
							font-size: 24rpx;
							margin-bottom: 20rpx;
						}

						.shop-item7 {
							position: absolute;
							bottom: 15rpx;
							right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>